<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/4/10
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.7.0
  -->
<template>
  <div class="app-container rules-list-container">
    <el-container>
      <div class="flex-left-pannel">
        <el-row>
          <div class="xf-tabletop-handles">
            <div class="xf-tabhd-left">
              <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加传感器</el-button>
            </div>
            <div class="xf-tabhd-right">
              <el-cascader
                :options="entityOptions"
                filterable
                :clearable = 'true'
                v-model="entity" class="xf-query-input" size="mini">
              </el-cascader>
              设备编号<el-input v-model="listQuery.sensorNo" placeholder="请输入设备编号" class="xf-query-input" clearable size="mini"></el-input>
              <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
            </div>
          </div>
        </el-row>
        <!--      table  -->
        <el-table
          key='tableKey'
          :data="list"
          ref="multipleTable"
          v-loading.body="listLoading" fit style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="设备编号">
            <template slot-scope="scope">
              <span v-if="channelId==='12'&&scope.row.sensorNo">{{scope.row.sensorNo.split(':')[0]}}</span>
              <span v-if="channelId!=='12'">{{scope.row.sensorNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{scope.row.equipmentType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号">
            <template slot-scope="scope">
              <span>{{scope.row.model}}</span>
            </template>
          </el-table-column>
          <el-table-column label="厂商">
            <template slot-scope="scope">
              <span>{{scope.row.manufacturer}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="createDel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="sensor-pagination-container">
          <div>
            <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!=0">全选</el-checkbox>
            <el-button type="text" style="margin-left: 10px;" @click="delAllSensor" v-show="list&&list.length!=0" :disabled="checklist&&checklist.length==0">全部删除</el-button>
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </el-container>
    <!--    删除弹窗-->
    <el-dialog title="删除传感器" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect">
        <p>确定删除吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini"  @click="deleteObj()">删除</el-button>
        <el-button type="text" size="mini"  @click="dialogDeleteVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <commeAdd :Show.sync="Show" :channelId.sync="channelId" :noticeRuleId.sync="noticeRuleId" @updateList="getList"></commeAdd>
    <fireDevice :Show.sync="fShow" :channelId.sync="channelId" :noticeRuleId.sync="noticeRuleId" @updateList="getList"></fireDevice>
    <videoDevice :Show.sync="vShow" :channelId.sync="channelId" :noticeRuleId.sync="noticeRuleId" @updateList="getList"></videoDevice>
  </div>
</template>
<script>
  import commeAdd from "@/components/noticRulelist/commeAdd";
  import fireDevice from "@/components/noticRulelist/fireDevice";
  import videoDevice from "@/components/noticRulelist/videoDevice";
  import {
    devicePage,
    deleteSensor
  } from "@/api/datahandler/pushRules/index";
  import {getAllInfoObj} from "@/api/device/deviceCollectingDevice/index";

  export default{
    components:{commeAdd,fireDevice,videoDevice},
    props:{
      noticeRuleId:{
        default:'',
      },
      channelId:{
        default:0
      }
    },
    data(){
      return{
        Show:false,
        fShow:false,
        vShow:false,
        entity:[],
        entityOptions:[],
        list:[],
        listQuery: {
          page: 1,
          limit: 10,
          sensorNo:'',
          noticeRuleId:'',
          channelId:''
        },
        total:0,
        listLoading:false,
        isselall:false,
        isIndeterminate:false,
        dialogDeleteVisible:false,
        checklist:[],
        delsensorid:[],
      }
    },
    created(){
      this.listQuery.noticeRuleId = this.noticeRuleId;
      this.listQuery.channelId = this.channelId;
      this.getList();
      this.getEntiy();
    },
    methods:{
      getList(){
        this.listLoading = true;
        devicePage(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      getEntiy(){
        //厂商系列型号
        getAllInfoObj("",{buildingId:"-1",channelId:this.channelId}).then(res=>{
          this.entityOptions = res.data.options;
        })
      },
      tableQuery() {
        //处理查询条件
        if(this.entity.length>0){
          this.listQuery.manufacturer = this.entity[0];
          this.listQuery.equipmentType = this.entity[1];
          this.listQuery.model = this.entity[2];
        }else{
          this.listQuery.manufacturer = undefined;
          this.listQuery.equipmentType = undefined;
          this.listQuery.model = undefined;
        }
        this.getList();
      },
      handleCreate(){
        switch (this.channelId) {
          case "5":
            this.fShow = true;
            break;
          case "12":
            this.vShow = true;
            break;
          default:
            this.Show = true;
        }
      },
      handleCheckAllChange(){
        this.$refs.multipleTable.toggleAllSelection();
      },
      deleteObj(){
        //执行删除操作
        deleteSensor({noticeRuleId:this.noticeRuleId,sensorIds:(this.delsensorid).toString()}).then(res=>{
          if (res.status===200){
            this.dialogDeleteVisible = false;
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
            this.listQuery.page = 1;
            //  清空全选
            this.isselall = false;
            this.isIndeterminate = false;
            this.getList();
          }
        })
      },
      delAllSensor(){
        this.delsensorid=[];

        this.checklist.forEach((item,index)=>{
          this.delsensorid.push(item.id);
        });
        this.dialogDeleteVisible = true;
      },
      createDel(row){
        //普通删除
        this.delsensorid = [];
        this.delsensorid.push(row.id);
        this.dialogDeleteVisible = true;
      },
      handleSelectionChange(val){
        //多选操作

        this.checklist=[...val];
        let length = this.total>this.list.length?this.list.length:this.total;
        this.isselall = val.length === length&&length>0;
        this.isIndeterminate = val.length>0&&val.length<length;
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
    },
  }
</script>
<style lang="scss">
  .rules-list-container{
    .xf-query-input,
    .xf-query-select {
      width: 200px;
      margin: 0 10px;
    }
    // 精准查询
    .xf-double-form{
      .xf-dbform-item{
        display: flex;
        justify-content: space-between;
        .xf-dbform-item__sleft{
          .el-input{
            width: 320px;
          }
        }
        .xf-dbform-item__sright{
          .el-input{
            width: 320px;
          }
        }
      }
    }
    .sensor-pagination-container{
      display:flex;
      justify-content:space-between;
      padding:10px 10px;
    }
  }
</style>
